<template>
    <section class="side-list">
        <div class="inner"  v-for="(i, k) in data" :key="k">
            <div class="title">
                {{i.name}}
                <div class="more">
                    更多 >>
                </div>
            </div>
            <div class="body">
                <l-r-item :listinfo="i.child"  v-if="i.hospital !==1&&i.relevant!==1&&i.aman!==1&&i.sale!==1&&i.doctor!==1"></l-r-item>
                <hospital v-if="i.hospital===1&&i.relevant!==1&&i.sale!==1" :listinfo="i.child"></hospital>
                <relevant-item :listinfo="i.child" v-if="i.hospital !==1&&i.relevant===1&&i.sale!==1" ></relevant-item>
                <aman-list :listinfo="i.child" v-if="i.aman===1&&i.hospital !==1&&i.relevant!==1&&i.sale!==1"></aman-list>
                <sale-item v-if="i.sale===1" :listinfo="i.child"></sale-item>
                <doctor-item v-if="i.doctor===1" :listinfo="i.child"></doctor-item>
            </div>
        </div>
    </section>
</template>

<script>
import LRItem from '../ListItem/LRItem'
import Hospital from '../ListItem/Hospital'
import RelevantItem from '../ListItem/RelevantItem'
import AmanList from '../ListItem/AmanList'
import SaleItem from '../ListItem/SaleItem'
import DoctorItem from '../ListItem/DoctorItem'
export default {
  name: 'SideUser',
  components: {
      LRItem,
      Hospital,
      RelevantItem,
      AmanList,
      SaleItem,
      DoctorItem
  },
    props: {
      list: {
          type: Array,
          required: true
      }
    },
    data () {
      return {
          data: this.list
      }
    }
}
</script>

<style scoped lang="less">
  @import "../../style/style.less";
  .side-list {
      .title {
          height: 55px;
          line-height: 55px;
          font-size: 16px;
          position: relative;
          padding-left: 10px;
          color: @theme-color-dark;
          &:before {
              content: '';
              width: 3px;
              height: 22px;
              background-color: @theme-color-dark;
              position: absolute;
              top: 17px;
              left: 0;
          }
          .more {
              color: @theme-color-dark;
              float: right;
              font-size: 12px;
          }
      }
  }
</style>
